import {Area} from "@antv/g2plot";

let chartInstance = null;

export const createChartR2 = async (el,data) => {
  if (chartInstance) {
    chartInstance?.destroy();
  }
  chartInstance = new Area(el, {
    padding: [10, 10, 30, 30],
    smooth: true,
    color: ["#B0F5F5", "#72ABF1"],
    data,
    xField: "time",
    yField: "value",
    autoFit: true,
    legend: {
      title:{
        style:{
          fill:'#fff'
        },
      },
      position:'top-right',
      visible: false,
    },
    xAxis: {
      tickLine: null,
      line: {
        style: {
          stroke: "#B7FFFF",
        },
      },
      label: {
        style: {
          fill: "#B7FFFF",
        },
      },
    },
    yAxis: {
      grid: {
        line: {
          style: {
            stroke: "#ffffff20",
            lineDash: [5, 10],
          },
        },
      },
      label: {
        style: {
          fill: "#B7FFFF",
        },
      },
    },
    seriesField: "country",
    responsive: true,
  });
  chartInstance.render();
};
